<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .main {
            display: grid;
            grid-template: repeat(3,1fr)/repeat(4, 1fr);
            gap: 20px;
            overflow: hidden;
            align-items: center;
            justify-items: center;
           
        }

        .item {
            width: 85%;
            height: 200px;
            background-image: linear-gradient(45deg,red,orange);
            display: flex;
            justify-content: center;
            align-items: center;
            color: #fff;
            font-size: 80px;
            border-radius: 10px;
            transition: 0.2s linear;
        }
        .item:hover{
            transform: scale(1.05);
            transition: 0.2s linear;
            /* 水平偏移 垂直偏移 模糊半径 扩散半径 颜色*/
            box-shadow: 3px 3px 5px 5px rgba(0,0,0,0.2);
        }
        .item:last-child{
            grid-area: 3/1/3/5;
        }
        @media screen and (min-width:500px) and (max-width:699px) {
            .main {
            display: grid;
            grid-template: repeat(3,1fr)/repeat(3, 1fr);
            gap: 20px;
        }
        .item:last-child{
            grid-area: auto;
        }
        }
        @media screen and (min-width:300px) and (max-width:499px) {
            .main {
            display: grid;
            grid-template: repeat(5,1fr)/repeat(2, 1fr);
            gap: 20px;
        }
        .item{
            height: 100px;
        }
        .item:last-child{
            grid-area: 5/1/5/3;
            
        }
        }
        @media screen and (min-width:0px) and (max-width:299px) {
            .main {
            display: grid;
            grid-template: repeat(9,1fr)/repeat(1, 1fr);
            gap: 5px;
        }
        .item{
            height: 50px;
            font-size: 20px;
            
        }
        .item:last-child{
            grid-area: auto;
            
        }
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="item">
            <div class="txt">1</div>
        </div>
        <div class="item">
            <div class="txt">2</div>
        </div>
        <div class="item">
            <div class="txt">3</div>
        </div>
        <div class="item">
            <div class="txt">4</div>
        </div>
        <div class="item">
            <div class="txt">5</div>
        </div>
        <div class="item">
            <div class="txt">6</div>
        </div>
        <div class="item">
            <div class="txt">7</div>
        </div>
        <div class="item">
            <div class="txt">8</div>
        </div>
        <div class="item">
            <div class="txt">9</div>
        </div>
    </div>
</body>

</html>